<template >
    <div id="goods_cat">
        <el-cascader
            v-model="goods_cat"
            :options="options"
            clearable
            @change="handleChange"
            :props="{ expandTrigger: 'hover',value:'cat_id',label: 'cat_name',children: 'children'}">
            <template slot-scope="{ data }">
                <span>{{ data.cat_name }}</span>
            </template>
        </el-cascader>
    </div>
</template>
<script>
export default {
    name:'goods_cat',
    data() {
        return {
             goods_cat: [],
             options:[]
        }
    },
   /*  beforeMounted(){
        this.$store.commit('goods/CHANGE_ADDGOODSQUERY',{goods_cat:[]})
    }, */
    
    mounted(){
        //获取所有列表
        
        this.$store.dispatch('categorie/Acs_getCategories')
        .then(res=>{this.options=res;})
        .catch(err=>console.log(err))
    },
    methods:{
         handleChange(goods_cat) {
             if(goods_cat.length<3&&goods_cat.length>=0){
                //console.log('清空');
                this.goods_cat=[];
                this.$store.commit('goods/CHANGE_ADDGOODSQUERY',{goods_cat:[]})
             }else{
                this.$store.commit('goods/CHANGE_ADDGOODSQUERY',{goods_cat:goods_cat.join(',')})
             }
        }
    }
}
</script>
<style lang="scss" scoped>
    
</style>